<!doctype html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <link rel="icon" href="../dist/img/favicon-32x32.png" sizes="32x32" type="image/png">
    <link rel="icon" href="../dist/img/favicon-16x16.png" sizes="16x16" type="image/png">
    <meta name="keywords" content="响应式后台模板,开源免费后台模板,Bootstrap5后台管理系统模板">
    <meta name="description" content="Bootstrap-Admin基于bootstrap5的免费开源的响应式后台管理模板">
    <meta name="author" content="ajiho">
    <link rel="stylesheet" href="../plugins/bootstrap-icons/font/bootstrap-icons.css">
    <link rel="stylesheet" href="../plugins/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../dist/css/bootstrap-admin.min.css">
    <title>Bootstrap-Admin - 开源免费响应式后台管理系统模板</title>
</head>
<body class="bg-light pt-2">
<div class="container-fluid">
    <div class="card border-0 shadow-sm">
        <div class="card-body">
            <h4 class="card-title">时间轴基本演示</h4>
            <hr>
            <div class="row">
                <div class="col-md-2 d-none d-md-flex bsa-timeline-dot">
                    <span class="badge bg-danger border"></span>
                </div>
                <div class="col-md-10">
                    <div class="card shadow-sm my-3 bsa-radius-15">
                        <div class="card-body">
                            <h5 class="card-title">card-title</h5>
                            <h6 class="card-subtitle mb-2 text-muted">card-subtitle</h6>
                            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad alias
                                amet delectus deserunt enim, eum, excepturi, expedita iure labore laudantium magnam
                                nesciunt possimus quam quos ratione recusandae sapiente ut veritatis.</p>
                        </div>
                    </div>
                </div>

            </div>
            <div class="row">
                <div class="col-md-2 d-none d-md-flex bsa-timeline-dot">
                    <span class="badge bg-success border"></span>
                </div>
                <div class="col-md-10">
                    <div class="card shadow-sm my-3 bsa-radius-15">
                        <div class="card-body">
                            <h5 class="card-title">card-title</h5>
                            <h6 class="card-subtitle mb-2 text-muted">card-subtitle</h6>
                            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad alias
                                amet delectus deserunt enim, eum, excepturi, expedita iure labore laudantium magnam
                                nesciunt possimus quam quos ratione recusandae sapiente ut veritatis.

                            </p>
                            <p>
                                <a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample"
                                   role="button" aria-expanded="false" aria-controls="collapseExample">
                                    View details
                                </a>
                            </p>
                            <div class="collapse" id="collapseExample">
                                <div class="card card-body">
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto debitis
                                    dicta illum laborum magni quos, rem sint vitae! Animi commodi, deserunt eius
                                    ipsum laborum quam similique sunt? Iure reiciendis, reprehenderit.
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-2 d-none d-md-flex bsa-timeline-dot">
                    <span class="badge bg-success border"></span>
                </div>
                <div class="col-md-10">
                    <div class="card shadow-sm my-3 bsa-radius-15">
                        <div class="row g-0">
                            <div class="col-md-4 d-flex align-items-center bg-light">
                                <img src="https://temp.im/800x600" alt="..." class="card-img">
                            </div>
                            <div class="col-md-8">
                                <div class="card-body">
                                    <h5 class="card-title">card-title-3</h5>
                                    <p class="card-text">
                                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur
                                        dignissimos est minima natus nesciunt quo quod totam! Accusamus aperiam cum
                                        dolorem ducimus ex modi officiis, sed sequi similique vel voluptatem.
                                    </p>
                                    <p class="card-text"><small class="text-muted">last update 2022/7/17</small>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-2 d-none d-md-flex bsa-timeline-dot">
                    <span class="badge bg-success border"></span>
                </div>
                <div class="col-md-10">
                    <div class="card shadow-sm my-3 bsa-radius-15">
                        <div class="row g-0">
                            <div class="col-md-8">
                                <div class="card-body">
                                    <h5 class="card-title">card-title-4</h5>
                                    <p class="card-text">
                                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam assumenda
                                        atque consequatur, corporis dolores earum explicabo illo illum labore molestiae
                                        officiis provident ratione sed sint voluptas. Hic laborum nam voluptatum!
                                    </p>
                                    <p class="card-text"><small class="text-muted">last update 2022/7/17</small>
                                    </p>
                                </div>
                            </div>
                            <div class="col-md-4 d-flex align-items-center bg-light">
                                <img src="https://temp.im/300x200" alt="..." class="card-img">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <h4 class="card-title my-4">调整事件的位置</h4>
            <hr>
            <div class="row">
                <div class="col-md-10">
                    <div class="card shadow-sm my-3 bsa-radius-15">
                        <div class="card-body">
                            <h5 class="card-title">card-title</h5>
                            <h6 class="card-subtitle mb-2 text-muted">card-subtitle</h6>
                            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad alias
                                amet delectus deserunt enim, eum, excepturi, expedita iure labore laudantium magnam
                                nesciunt possimus quam quos ratione recusandae sapiente ut veritatis.</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-2 d-none d-md-flex bsa-timeline-dot">
                    <span class="badge bg-success border"></span>
                </div>
            </div>
            <div class="row">
                <div class="col-md-10">
                    <div class="card shadow-sm my-3 bsa-radius-15">
                        <div class="card-body">
                            <h5 class="card-title">card-title</h5>
                            <h6 class="card-subtitle mb-2 text-muted">card-subtitle</h6>
                            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad alias
                                amet delectus deserunt enim, eum, excepturi, expedita iure labore laudantium magnam
                                nesciunt possimus quam quos ratione recusandae sapiente ut veritatis.</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-2 d-none d-md-flex bsa-timeline-dot">
                    <span class="badge bg-dark border"></span>
                </div>
            </div>
            <h4 class="card-title my-4">事件分布在两侧</h4>
            <hr>
            <div class="row">
                <div class="col-sm">
                    <!--占位-->
                </div>
                <div class="col-sm-1 d-none d-sm-flex  bsa-timeline-dot">
                    <span class="badge  bg-warning border"></span>
                </div>
                <div class="col-sm">
                    <div class="card shadow-sm my-3 bsa-radius-15">
                        <div class="card-body">
                            <h5 class="card-title">card-title</h5>
                            <h6 class="card-subtitle mb-2 text-muted">card-subtitle</h6>
                            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad alias
                                amet delectus deserunt enim, eum, excepturi, expedita iure labore laudantium magnam
                                nesciunt possimus quam quos ratione recusandae sapiente ut veritatis.</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm">
                    <div class="card shadow-sm my-3 bsa-radius-15">
                        <div class="card-body">
                            <h5 class="card-title">card-title</h5>
                            <h6 class="card-subtitle mb-2 text-muted">card-subtitle</h6>
                            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad alias
                                amet delectus deserunt enim, eum, excepturi, expedita iure labore laudantium magnam
                                nesciunt possimus quam quos ratione recusandae sapiente ut veritatis.</p>
                        </div>
                    </div>
                </div>
                <div class="col-sm-1 d-none d-sm-flex bsa-timeline-dot">
                    <span class="badge bg-primary border"></span>
                </div>
                <div class="col-sm">
                    <!--占位-->
                </div>
            </div>
        </div>
    </div>
</div>

<script src="../plugins/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="../dist/js/bootstrap-admin.min.js"></script>
</body>
</html>